<template>
  <tr>
    <td>
      <el-form-item label="">
        <img :src="from.coverPic" style="width: 150px; height: 150px;">
      </el-form-item>
    </td>
  <tr>
    <td>
      <el-form-item label="生产批次">
        <span>第三次</span>
      </el-form-item>
    </td>
    <td>
      <el-form-item label="保质期">
        <span>10个月</span>
      </el-form-item>
    </td>
  </tr>
  <tr>
    <td>
      <el-form-item label="生产许可证">
        <span>国家卫生局</span>
      </el-form-item>
    </td>
    <td>
      <el-form-item label="生产皮业">
        <span>养殖场</span>
      </el-form-item>
    </td>
  </tr>
  <tr>
    <td>产品检验报告</td>
  </tr>
  <tr>
    <td>
      <el-upload v-model:file-list="fileList" action="https://localhost:7229/api/Tracebility/UploadFile"
        list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
        <el-icon>
          <Plus />
        </el-icon>
      </el-upload>
      <el-dialog v-model="dialogVisible">
        <img w-full :src="dialogImageUrl" alt="Preview Image" />
      </el-dialog>
    </td>
  </tr>
  </tr>
  <el-tabs type="border-card">
    <el-tab-pane label="养殖信息">
      <h2>养殖信息 <el-button type="primary" size="small" @click="SZ()">设置</el-button></h2>
      <hr>
      <tr>
        <td>
          <el-form-item label="品种">
            <span>:{{ from1.variety }}</span>
          </el-form-item>
        </td>
        <td>
          <el-form-item label="来源">
            <span>:{{ from1.source }}</span>
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="饲养天数">
            <span>:{{ from1.feedingDays }}</span>
          </el-form-item>
        </td>
        <td>
          <el-form-item label="饲养品牌">
            <span>:{{ from1.feedingBrand }}</span>
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="饲养负责人">
            <span>:{{ from1.feedingHead }}</span>
          </el-form-item>
        </td>
        <td>
          <el-form-item label="出栏日期">
            <span>:{{ from1.birthData }}</span>
          </el-form-item>
        </td>
      </tr>


      <el-dialog v-model="table3" title="Shipping address" width="500">
        <el-form :model="form">
          <el-form-item label="品种">
            <el-input v-model="info.variety" autocomplete="off" />
          </el-form-item>
          <el-form-item label="来源">
            <el-input v-model="info.source" autocomplete="off" />
          </el-form-item>
          <el-form-item label="饲养天数">
            <el-input v-model="info.feedingDays" autocomplete="off" />
          </el-form-item>
          <el-form-item label="饲养品牌">
            <el-input v-model="info.feedingBrand" autocomplete="off" />
          </el-form-item>
          <el-form-item label="饲养负责人">
            <el-input v-model="info.feedingHead" autocomplete="off" />
          </el-form-item>
          <el-form-item label="出栏日期">
            <el-date-picker v-model="info.birthData" type="date" style="width: 100%" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="addapp()">
              添加
            </el-button>
          </div>
        </template>
      </el-dialog>
      <br>
      <h2>保健信息 <el-button size="small" @click="">新增行</el-button></h2>
      <hr>
      <br><br><br><br>
      <h2>动物检 </h2>
      <el-upload v-model:file-list="fileList" action="https://localhost:7229/api/Tracebility/UploadFile"
        list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
        <el-icon>
          <Plus />
        </el-icon>
      </el-upload>
      <el-dialog v-model="dialogVisible">
        <img w-full :src="dialogImageUrl" alt="Preview Image" />
      </el-dialog>
      <br><br>
      <h2>企业信息 <el-button size="small" @click="SZ1()">设置</el-button></h2>
      <hr>
      <tr>
        <td>
          <el-form-item label="养殖场">
            <span>:{{ from2.fName }}</span>
          </el-form-item>
        </td>
        <td>
          <el-form-item label="负责人">
            <span>:{{ from2.fzName }}</span>
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="存栏数量">
            <span>:{{ from2.fNum }}</span>
          </el-form-item>
        </td>
      </tr>

      <br>

      <el-dialog v-model="table4" title="Shipping address" width="500">
        <el-form :model="form">
          <el-form-item label="养殖场">
            <el-input v-model="info1.fName" autocomplete="off" />
          </el-form-item>
          <el-form-item label="负责人">
            <el-input v-model="info1.fzName" autocomplete="off" />
          </el-form-item>
          <el-form-item label="存栏数量">
            <el-input v-model="info1.fNum" autocomplete="off" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="addappYZ()">
              添加
            </el-button>
          </div>
        </template>
      </el-dialog>
      <h2>企业照片 </h2>
      <el-upload v-model:file-list="fileList" action="https://localhost:7229/api/Tracebility/UploadFile"
        list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
        <el-icon>
          <Plus />
        </el-icon>
      </el-upload>
      <el-dialog v-model="dialogVisible">
        <img w-full :src="dialogImageUrl" alt="Preview Image" />
      </el-dialog>


    </el-tab-pane>
    <el-tab-pane label="屠宰信息">
      <h2>屠宰信息 <el-button type="primary" size="small" @click="TZSZ()">设置</el-button></h2>
      <hr>
      <tr>
        <td>
          <el-form-item label="批次">
            <span>:{{ from3.batch }}</span>
          </el-form-item>
        </td>
        <td>
          <el-form-item label="到场均重">
            <span>:{{ from3.presentWeight }}</span>
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="到场时间">
            <span>:{{ from3.presentData }}</span>
          </el-form-item>
        </td>
        <td>
          <el-form-item label="屠宰时间">
            <span>:{{ from3.slaughterData }}</span>
          </el-form-item>
        </td>
      </tr>


      <el-dialog v-model="table5" title="Shipping address" width="500">
        <el-form :model="form">
          <el-form-item label="批次">
            <el-input v-model="info2.batch" autocomplete="off" />
          </el-form-item>
          <el-form-item label="到场均重">
            <el-input v-model="info2.presentWeight" autocomplete="off" />
          </el-form-item>
          <el-form-item label="到场时间">
            <el-date-picker v-model="info2.presentData" type="date" style="width: 100%" />
          </el-form-item>
          <el-form-item label="屠宰时间">
            <el-date-picker v-model="info2.slaughterData" type="date" style="width: 100%" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="addappTZ()">
              添加
            </el-button>
          </div>
        </template>
      </el-dialog>
      <br>
      <h2>相关资质 </h2>
      <hr>
      <el-upload v-model:file-list="fileList" action="https://localhost:7229/api/Tracebility/UploadFile"
        list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
        <el-icon>
          <Plus />
        </el-icon>
      </el-upload>
      <el-dialog v-model="dialogVisible">
        <img w-full :src="dialogImageUrl" alt="Preview Image" />
      </el-dialog>
      <br>
      <h2>企业信息 <el-button type="primary" size="small" @click="TZSZ1()">设置</el-button></h2>
      <hr>
      <tr>
        <td>
          <el-form-item label="公司名称">
            <span>:{{ from4.firmName }}</span>
          </el-form-item>
        </td>
        <td>
          <el-form-item label="成立时间">
            <span>:{{ from4.establishData }}</span>
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="公司地址">
            <span>:{{ from4.firmDZ }}</span>
          </el-form-item>
        </td>
        <td>
          <el-form-item label="公司简介">
            <span>:{{ from4.firmDesc }}</span>
          </el-form-item>
        </td>
      </tr>


      <el-dialog v-model="table6" title="Shipping address" width="500">
        <el-form :model="form">
          <el-form-item label="公司名称">
            <el-input v-model="info3.firmName" autocomplete="off" />
          </el-form-item>
          <el-form-item label="成立时间">
            <el-date-picker v-model="info3.establishData" type="date" style="width: 100%" />
          </el-form-item>
          <el-form-item label="公司地址">
            <el-input v-model="info3.firmDZ" autocomplete="off" />
          </el-form-item>
          <el-form-item label="公司简介">
            <el-input v-model="info3.firmDesc" autocomplete="off" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="addappQY()">
              添加
            </el-button>
          </div>
        </template>
      </el-dialog>
      <h2>企业照片 </h2>
      <el-upload v-model:file-list="fileList" action="https://localhost:7229/api/Tracebility/UploadFile"
        list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
        <el-icon>
          <Plus />
        </el-icon>
      </el-upload>
      <el-dialog v-model="dialogVisible">
        <img w-full :src="dialogImageUrl" alt="Preview Image" />
      </el-dialog>

    </el-tab-pane>
    <el-tab-pane label="深加工信息">
      <h2>深加工信息 <el-button type="primary" size="small" @click="TZSZ()">设置</el-button></h2>
      <hr>
      <el-dialog v-model="table5" title="Shipping address" width="500">
        <el-form :model="form">
          <el-form-item label="公司名称">
            <el-input v-model="info2.batch" autocomplete="off" />
          </el-form-item>
          <el-form-item label="生产许可证">
            <el-input v-model="info2.presentWeight" autocomplete="off" />
          </el-form-item>     
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="addappTZ()">
              保存
            </el-button>
          </div>
        </template>
      </el-dialog>
      <br>
      <h2>相关材料 </h2>
      <hr>
      <el-upload v-model:file-list="fileList" action="https://localhost:7229/api/Tracebility/UploadFile"
        list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
        <el-icon>
          <Plus />
        </el-icon>
      </el-upload>
      <el-dialog v-model="dialogVisible">
        <img w-full :src="dialogImageUrl" alt="Preview Image" />
      </el-dialog>
      <br>
      <h2>企业信息 <el-button type="primary" size="small" @click="TZSZ1()">设置</el-button></h2>
      <hr>
      <tr>
        <td>
          <el-form-item label="公司名称">
            <span>:{{ from4.firmName }}</span>
          </el-form-item>
        </td>
        <td>
          <el-form-item label="成立时间">
            <span>:{{ from4.establishData }}</span>
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="公司地址">
            <span>:{{ from4.firmDZ }}</span>
          </el-form-item>
        </td>
        <td>
          <el-form-item label="公司简介">
            <span>:{{ from4.firmDesc }}</span>
          </el-form-item>
        </td>
      </tr>


      <el-dialog v-model="table6" title="Shipping address" width="500">
        <el-form :model="form">
          <el-form-item label="公司名称">
            <el-input v-model="info3.firmName" autocomplete="off" />
          </el-form-item>
          <el-form-item label="成立时间">
            <el-date-picker v-model="info3.establishData" type="date" style="width: 100%" />
          </el-form-item>
          <el-form-item label="公司地址">
            <el-input v-model="info3.firmDZ" autocomplete="off" />
          </el-form-item>
          <el-form-item label="公司简介">
            <el-input v-model="info3.firmDesc" autocomplete="off" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="addappQY()">
              添加
            </el-button>
          </div>
        </template>
      </el-dialog>
      <h2>企业照片 </h2>
      <el-upload v-model:file-list="fileList" action="https://localhost:7229/api/Tracebility/UploadFile"
        list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
        <el-icon>
          <Plus />
        </el-icon>
      </el-upload>
      <el-dialog v-model="dialogVisible">
        <img w-full :src="dialogImageUrl" alt="Preview Image" />
      </el-dialog>

    </el-tab-pane>
  </el-tabs>
</template>
<script lang="ts" setup>
import { ref, onMounted, reactive, watch } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'

import type { UploadProps, UploadUserFile } from 'element-plus'



const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}





const route = useRoute();
const form = reactive({
  coverPic: ""
})
const table3 = ref(false);
const SZ = () => {
  table3.value = true;
}
const table4 = ref(false);
const SZ1 = () => {
  table4.value = true;
}

const table5 = ref(false);
const TZSZ = () => {
  table5.value = true;
}
const table6 = ref(false);
const TZSZ1 = () => {
  table6.value = true;
}




const info = reactive({
  cultivationInfoId: 0,
  variety: "",
  source: "",
  feedingDays: 0,
  feedingBrand: "",
  feedingHead: '',
  birthData: '',
  isDelete: true,
  traceabilityId: "",
})

const addapp = () => {
  axios.post('https://localhost:7227/api/CultivationInfo/AddTracebility', info).then(res => {
    if (res.data.statusCode == 0) {
      ElMessage.success(res.data.message)
      table3.value = false;
    }
    else {
      ElMessage.error(res.data.message)
    }
  })
}

const info1 = reactive({
  fId: 0,
  fName: "",
  fzName: "",
  fNum: 0,
})

const addappYZ = () => {
  axios.post('https://localhost:7229/api/Farms/AddFarms', info1).then(res => {
    if (res.data.statusCode == 0) {
      ElMessage.success(res.data.message)
      table3.value = false;
    }
    else {
      ElMessage.error(res.data.message)
    }
  })
}
const from = reactive({
  traceabilityId: route.query.id,
  coverPic: "",
  shoppName: "",
  proBatch: "",
  shelfLife: 0,
  proLicense: "",
  manufacturers: ""
})

onMounted(() => {
  getlist();
  getlistYZ();
  getlistQY();
  getlistTZ();
  getlistQY1();
})
const ftdate = ref([]);
const getlist = () => {
  axios.get('https://localhost:7229/api/Tracebility/GetTracebilityDetile', {
    params: {
      TraceabilityId: from.traceabilityId
    }
  })
    .then(res => {
      ftdate.value = res.data.data;
      from.coverPic = res.data.data.coverPic;
      from.shoppName = res.data.data.shoppName;
      from.proBatch = res.data.data.proBatch;
      from.shelfLife = res.data.data.shelfLife;
      from.proLicense = res.data.data.proLicense;
      from.manufacturers = res.data.data.manufacturers;
    })
}

const from1 = reactive({
  variety: "",
  source: "",
  feedingDays: 0,
  feedingBrand: "",
  feedingHead: "",
  birthData: ""
})

const ftdate1 = ref([]);
const getlistYZ = () => {
  axios.get('https://localhost:7229/api/CultivationInfo/CultivationInfoQuery')
    .then(res => {
      ftdate1.value = res.data.data;
      from1.variety = res.data.data.variety;
      from1.source = res.data.data.source;
      from1.feedingDays = res.data.data.feedingDays;
      from1.feedingBrand = res.data.data.feedingBrand;
      from1.feedingHead = res.data.data.feedingHead;
      from1.birthData = res.data.data.birthData;
    })
}
//屠宰信息
const from3 = reactive({
  batch: "",
  presentWeight: "",
  presentData: 0,
  slaughterData: "",
})

const ftdate3 = ref([]);
const getlistTZ = () => {
  axios.get('https://localhost:7229/api/Slaughter/SlaughterQuery')
    .then(res => {
      ftdate3.value = res.data.data;
      from3.batch = res.data.data.batch;
      from3.presentWeight = res.data.data.presentWeight;
      from3.presentData = res.data.data.presentData;
      from3.slaughterData = res.data.data.slaughterData;
    })
}
//添加屠宰信息
const info2 = reactive({
  slaughterId: 0,
  traceabilityId: "",
  batch: "",
  presentWeight: 0,
  presentData: "",
  slaughterData: "",
  slaughterPic: "",
  isDelete: true,
})

const addappTZ = () => {
  axios.post('https://localhost:7229/api/Slaughter/SlaughterAdd', info2).then(res => {
    if (res.data.statusCode == 0) {
      ElMessage.success(res.data.message)
      table3.value = false;
    }
    else {
      ElMessage.error(res.data.message)
    }
  })
}
//企业信息
const from4 = reactive({
  firmName: "",
  firmDZ: "",
  establishData: "",
  firmDesc: "",
})

const ftdate4 = ref([]);
const getlistQY1 = () => {
  axios.get('https://localhost:7229/api/Enterprise/EnterpriseQuery')
    .then(res => {
      ftdate4.value = res.data.data;
      from4.firmName = res.data.data.firmName;
      from4.firmDZ = res.data.data.firmDZ;
      from4.establishData = res.data.data.establishData;
      from4.firmDesc = res.data.data.firmDesc;
    })
}
//添加企业信息
const info3 = reactive({
  firmName: "",
  firmDZ: "",
  establishData: "",
  firmDesc: "",
})

const addappQY = () => {
  axios.post('https://localhost:7229/api/Enterprise/EnterpriseAdd', info3).then(res => {
    if (res.data.statusCode == 0) {
      ElMessage.success(res.data.message)
      table3.value = false;
    }
    else {
      ElMessage.error(res.data.message)
    }
  })
}

const from2 = reactive({
  fName: "",
  fzName: "",
  fNum: 0,
})

const ftdate2 = ref([]);
const getlistQY = () => {
  axios.get('https://localhost:7229/api/Farms/FarmsQuery')
    .then(res => {
      ftdate2.value = res.data.data;
      from2.fName = res.data.data.fName;
      from2.fzName = res.data.data.fzName;
      from2.fNum = res.data.data.fNum;
    })
}

const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  form.coverPic = 'https://localhost:7229' + response
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}

</script>
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>